<template>
  <div id="app">
    <el-container>
      <el-header class="header">
        <div class="headerTitle">
            HIS云医院管理系统

        </div>
      </el-header>
      <el-container>
        <el-aside width="300px">
            <el-col :span="20">
              <el-menu
                class="el-menu-vertical-demo"
                router
                text-color="#303133">
                <el-submenu :index="(index+'')" v-for="(item,index) in menu" :key="index" >
                  <template slot="title">
                    <i :class="item.icon"></i>
                    <span>{{item.name}}</span>
                  </template>
                  <el-menu-item :index="item1.path+''" v-for="(item1,index1) in item.children" :key="item.path" v-if="index1>=1">
                  <i :class="item1.icon"></i>{{item1.name}}
                  </el-menu-item>
                </el-submenu>
                </el-menu>
            </el-col>
        </el-aside>
        <el-main>
        <router-view />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
export default {
  name: 'App',
  data(){
    return{
    	name:'',
    	goods:[[]],
    	menu:"",
    	key:""
    }
  },
  methods:{
  	handleChange:function(){
  		let str="/hisbg/menu";
  		let g=this.$axios.get(str);
  		g.then(
  			res=>{
  				this.menu=res.data;
  			}
  		)
  	},
  },
  mounted() {
    this.handleChange();
  }
}
</script>

<style>

#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* text-align: center; */
  color: #2c3e50;
  /* margin-top: 60px; */
}
.header{
     height: 60px;
     background-color: #20a0ff;
     color: #333;
     text-align: left;
}
.headerTitle{
    color: #fff;
    font-size: 160%;
    font-weight: 700;
    margin-top: 12px;
}
 * {
    margin: 0;
    padding: 0;
   }
</style>
